import React, { Component } from 'react';
import { browserHistory, Router, Route, IndexRoute } from 'react-router'
import { Layout, Menu, Icon ,Select,message} from 'antd';
import { Link } from 'react-router';
import './index.less';
import config from './components/config/config'; //引入配置文件 config对象
const allRouter=config.router;
const Option = Select.Option;
const { Header, Sider, Content } = Layout; //antd 布局组件
const SubMenu = Menu.SubMenu; //antd菜单
const MenuItem = Menu.Item; //antd子菜单
let userInfo = {};
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            nav: config.menu[0].key, //当前一级导航 默认是config的第一个 可以根据需要修改一个默认
            menuKey: '', //当前二级或三级菜单选择的
            son: config.menu[0].son, //根据一级导航所保存的二级菜单  默认是config的第一个一级菜单的子集 可以根据需要修改一个默认
            userInfoDisplay:'',//右上角用户信息展示
        }
    }
    componentWillMount(){

        userInfo = JSON.parse(sessionStorage.getItem('UserInfo')); //用户信息
    }
    componentWillReceiveProps() {
        setTimeout(()=>{
            let pathname = this.props.location.pathname;
            if(pathname!=='/updatePassword' && pathname !== '/login'){
                this.setState({
                    userInfoDisplay:'adminDisplay',
                })
            }else if(pathname === 'updatePassword'){
                this.setState({
                    userInfoDisplay:'updatePassword',
                })
            }
        },500);
    }
    componentDidMount(){
        if(this.props.location.pathname!=='/updatePassword'){
            this.setState({
                userInfoDisplay:'adminDisplay',
            })
        }else{
            this.setState({
                userInfoDisplay:'updatePassword',
            })
        }
    }
    handleClick(e) {
        //console.log(e);
        if(e.key=='admin'){
            return;
        }
        let son;
        config.menu.forEach(menu => {
           // console.log(e.key);
            if (menu.key === e.key) {
                son = menu.son;
            }
        });
        this.setState({
            nav: e.key,
            son,
        })
    }
    handleChange(value){
        this.setState({
            userInfoDisplay:value,
        });
        //console.log(value);
        if(value==='adminDisplay'){
            browserHistory.push('/');
        }
        //修改密码
        if(value==='updatePassword'){
            browserHistory.push('/updatePassword');
        }
        //退出账户
        if(value==='clearUserInfo'){
            sessionStorage.removeItem('UserInfo');
            sessionStorage.removeItem('token');
            browserHistory.push('/login');
        }
    }
    render() {
        const style = {
            display: 'inline-block',
            marginRight: 5,
            width: 3,
            height: 3,
            background: '#fff',
            borderRadius: '50%',
        };
        return (
            <Layout style={{height:'100%'}}>
                <Sider>
                    <div>
                        <div className='logo'>
                            <img src={require('../src/images/logo.png')} alt=""/>
                        </div>
                        <div className='nav'>
                            <Menu theme="dark" mode="inline">
                            {
                                this.state.son.map(item => {
                                    let icon;
                                    switch (item.name) {
                                        case '商品管理':
                                            icon = <Icon type="gift" />;
                                            break;
                                        case '订单管理':
                                            icon = <Icon type="book" />;
                                            break;
                                        case '医生排班':
                                            icon = <img src={require('./images/yishengpaiban.png')}/>;
                                            break;
                                        case '科室管理':
                                            icon = <img src={require('./images/dengjiandfenzhen.png')}/>;
                                            break;
                                        case '药品/物资库管理':
                                            icon = <img src={require('./images/yaopinwuziku.png')}/>;
                                            break;
                                        case '统计报表':
                                            icon = <Icon type="file-text" />;
                                            break;
                                        case '门店管理':
                                            icon = <img src={require('./images/mendianguanli.png')}/>;
                                            break;
                                        case '配送管理':
                                            icon = <Icon type="rocket" />;
                                            break;
                                        case '登记并分诊':
                                            icon = <img src={require('./images/dengjiandfenzhen.png')}/>;
                                            break;
                                        case '分诊':
                                            icon = <img src={require('./images/fenzhen.png')}/>;
                                            break;
                                        case '医生门诊':
                                            icon = <img src={require('./images/yishengmenzhen.png')}/>;
                                            break;
                                        case '辅助治疗':
                                            icon = <img src={require('./images/dengjiandfenzhen.png')}/>;
                                            break;
                                        case '药房':
                                            icon = <img src={require('./images/yaofang.png')}/>;
                                            break;
                                        case '收银':
                                            icon = <img src={require('./images/shouyin.png')}/>;
                                            break;
                                        case '网上预约':
                                            icon = <Icon type="global"/>;
                                            break;
                                        case '问诊中心':
                                            icon = <Icon type="mobile" />;
                                            break;
                                        default:
                                            icon = <Icon type="appstore-o" />;
                                            break;
                                        case '操作日志':
                                            icon = <img src={require('./images/caozuorizhi.png')}/>;
                                            break;
                                        case '工作台':
                                            icon =  <img src={require('./images/gongzuotai.png')}/>;
                                            break;
                                        case '外科治疗':
                                            icon =  <img src={require('./images/waikezhiliao.png')}/>;
                                            break;
                                    }
                                    //根据需要 菜单是否需要子集
                                    //判断菜单是否有子集
                                    if (item.son.length){
                                        return (
                                            <SubMenu key={item.key} title={<span>{icon}<span>{item.name}</span></span>}>
                                                {item.son.map(son => {
                                                    if(userInfo.jurisdiction){
                                                        if(userInfo.jurisdiction.length){
                                                            if(userInfo.jurisdiction.indexOf(son.keyword)!==-1){
                                                                return (
                                                                    <MenuItem key={son.key}>
                                                                        <Link to={son.url}><i style={style}></i><span>{son.name}</span></Link>
                                                                    </MenuItem>
                                                                )
                                                            }
                                                        }
                                                    }
                                                   })}
                                            </SubMenu>
                                        )
                                    } else {
                                        if(userInfo.jurisdiction){
                                            if(userInfo.jurisdiction.length){
                                                if(userInfo.jurisdiction.indexOf(item.keyword)!==-1){
                                                    return (
                                                        <MenuItem key={item.key}>
                                                            <Link to={item.url}>{icon}{item.name}</Link>
                                                        </MenuItem>
                                                    )
                                                }
                                            }
                                        }
                                    }
                                })
                            }
                        </Menu>
                        </div>
                    </div>
                </Sider>
                <Layout>
                    <Header style={{ background: '#fafafa' }}>
                        <Menu
                            style={{ display: 'inline-block', width: '100%',background:'#d9d9d9'}}
                            onClick={this.handleClick.bind(this)}
                            selectedKeys={[this.state.nav]}
                            mode="horizontal"
                        >
                            {
                                config.menu.map(item => {
                                    //根据导航不同可以给不同的标签图标 需要注意每有一个菜单则需要匹配一个 不然会出现undefind
                                    let icon;
                                    switch (item.name) {
                                        case '工作台':
                                            icon = <Icon type="desktop" />;
                                            break;
                                        case '医疗':
                                            icon = <Icon type="medicine-box" />;
                                            break;
                                        case '资讯':
                                            icon = <Icon type="message"/>;
                                            break;
                                        case '手机端':
                                            icon = <Icon type="mobile" />;
                                            break;
                                        default:
                                            icon = <Icon type="appstore-o" />;
                                            break;
                                    }
                                    //如果需要在导航点击跳转 组件则是
                                    //<MenuItem key={item.key}>{icon}<Link to={item.url}>{item.name}</Link></MenuItem>
                                    return <MenuItem className='navItem' key={item.key}>{icon}{item.name}</MenuItem>
                                })
                            }
                            <MenuItem className='navItem' key='admin' style={{width: 250,float:'right',marginRight:'30px'}}>
                                <img src={require('./images/account.png')} alt="" style={{marginRight:'10px'}}/>
                                <Select
                                    style={{ width: 200 }}
                                    onChange={this.handleChange.bind(this)}
                                    value={this.state.userInfoDisplay}
                                >
                                    <Option value="adminDisplay">{userInfo.name+'-'+userInfo.roleName}</Option>
                                    <Option value="updatePassword">修改密码</Option>
                                    <Option value="clearUserInfo">退出账户</Option>
                                </Select>
                            </MenuItem>
                        </Menu>
                    </Header>
                    <Content>
                        {this.props.children}
                    </Content>
                </Layout>
            </Layout>
        );
    }
}

export default App;
